<template>
	<div class="container">
		<h3 class="header-title clearfix">
			<span class="border"></span>
			<p>{{headerTitle}}</p>
		</h3>

		<div class="addbox">
			<el-form ref="form" :model="formcompany" :rules="rules" label-width="130px">
				<div class="box1">
					<el-form-item label="公司logo" prop="logo">
						<el-upload class="upload-demo" ref="upload" v-loading="loadings" :file-list="fileListBymendian"
							:show-file-list="false" :auto-upload="true" v-show="!formcompany.logo"
							v-model="formcompany.logo" action="https://fcapp.fcw-china.com/system/v1/common/upload"
							list-type="picture-card" :on-remove="handleRemoveBymendian" :on-success="successBymendian"
							:limit="5" :on-preview="handlePictureCardPreview">
							<div class="stybox">
								<i class="el-icon-plus"></i>
							</div>
						</el-upload>

						<div class="tudou" v-show="formcompany.logo">
							<span @click="dellogo" class="el-icon-delete spandel"></span>
							<img :src="formcompany.logo" alt="" style="width: 148px; height: 148px;">
						</div>

						<!-- <img :src="formcompany.logo" v-show="formcompany.logo" alt=""
							style="width: 148px; height: 148px;"> -->
					</el-form-item>

					<el-form-item label="公司名称" prop="companyname">
						<el-input v-model="formcompany.companyname" style="width: 260px;"></el-input>
					</el-form-item>



					<el-form-item label="企业所在地区" prop="area">
						<el-cascader v-model="formcompany.area" placeholder="请输入/选择企业所在地区" :options="citylist" @change="handleChange" :show-all-levels="true"
					    filterable
							style="width: 260px;" expandTrigger="hover"></el-cascader>
					</el-form-item>

					<el-form-item label="企业详细地址" prop="address">
						<el-input v-model="formcompany.address" style="width: 260px;"></el-input>
					</el-form-item>

					<el-form-item label="法人姓名" prop="identityname">
						<el-input v-model="formcompany.identityname" style="width: 260px;"></el-input>
					</el-form-item>

					<el-form-item label="营业执照" prop="shopcontactposition">
						<el-upload ref="upload" :file-list="fileListByzhizhao" :show-file-list="false"
							:auto-upload="true" v-show="!zz" v-model="formcompany.storeBusinessLicenses"
							:http-request="uploadZipAction" :on-change="onChange"
							action="https://fcapp.fcw-china.com/system/v1/common/upload" list-type="picture-card"
							:on-success="successByzhizhao" :limit="3" :on-preview="handlePictureCardPreview">
							<div class="stybox">
								<i class="el-icon-plus"></i>
							</div>
						</el-upload>
						<div class="tudou" v-show="zz">
							<span @click="delyy" class="el-icon-delete spandel"></span>
							<img :src="`data:image/png;base64,${zz}`" alt="" @blur="a1s"
								style="width: 148px; height: 148px;">
						</div>
					</el-form-item>
					<div class="box4">
						<el-button v-show="companybtnshow" type="primary" v-preventReClick style="width: 152px;" @click="addcompany">提交
						</el-button>
						<el-button v-show="!companybtnshow"
							style="width: 152px; background-color: gray; color: #000000; border: none;">提交</el-button>
					</div>
				</div>
				<div class="box2">
					<el-form-item label="企业性质">
						<el-select v-model="formcompany.companytype" placeholder="请选择" style="width: 260px;">
							<el-option v-for="item in companytypeList" :key="item.code" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="企业规模">
						<el-select v-model="formcompany.companysize" placeholder="请选择" style="width: 260px;">
							<el-option v-for="item in companysizeList" :key="item.code" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="所属行业">
						<el-select v-model="tradeid" placeholder="请选择/输入所属行业" filterable  style="width: 260px;" @change="chanetrade">
							<el-option v-for="item in subLevelModelList" :key="item.code" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>

					</el-form-item>

					<el-form-item label="运营联系人">
						<el-input v-model="formcompany.operationname" style="width: 260px;"></el-input>
					</el-form-item>

					<el-form-item label="运营联系电话">
						<el-input v-model="formcompany.operationtel" style="width: 260px;"></el-input>
					</el-form-item>

					<el-form-item label="公司邮箱">
						<el-input v-model="formcompany.companyemail" style="width: 260px;"></el-input>
					</el-form-item>



				</div>
				<div class="box3">
					<el-form-item label="企业介绍">
						<el-input type="textarea" v-model="formcompany.companyinfo" style="width: 260px;"></el-input>
					</el-form-item>

					<el-form-item label="企业风采" style="width: 600px;">
						<el-upload ref="upload" :file-list="fileListByshow" :auto-upload="true"
							v-model="formcompany.companyshow"
							action="https://fcapp.fcw-china.com/system/v1/common/upload" list-type='picture-card'
							:on-remove="handleRemoveBymendian" :on-success="successByshow" :limit="9"
							:on-preview="handlePictureCardPreview">
							<div class="stybox" v-show="companyimgshow">
								<i class="el-icon-plus"></i>
							</div>
						</el-upload>
					</el-form-item>

				</div>




			</el-form>

		</div>




	</div>
</template>

<script>
	export default {
		components: {
			comNavTabs: () => import("@/household/common/comNavTabs.vue"),
			comSearch: () => import("@/component/common/comSearch.vue"),
			// 	comImport: () => import("@/component/common/comImport.vue"),
			comTable: () => import("@/household/common/comTable.vue"),
			// 	flexDemand: () => import("@/component/flexible/flexDemand.vue"),
			// 	flexManualEntry: () => import("@/component/flexible/flexManualEntry.vue"),
			// 	flexRegisterMsg: () => import("@/component/flexible/flexRegisterMsg.vue"),
			// 	flexUnsuccessful: () => import("@/component/flexible/flexUnsuccessful.vue"),
			// 	flexUpload: () => import("@/component/flexible/flexUpload.vue"),
			// 	flexCollectAccount: () => import("@/component/flexible/flexCollectAccount.vue"),
			// 	flexImportTemplate: () => import("@/component/flexible/flexImportTemplate.vue"),
		},
		data() {
			var checkcompanyname = (rule, value, callback) => {
				if (!value) {
					this.companybtnshow = false
					return callback(new Error('公司名称不能为空'));
				} else if (this.checkadd) {
					this.companybtnshow = true
					console.log(111111111);
				} else {

					console.log(value);
					let params = {
						companyname: value
					}
					this.$ceshiGetAxios("v1/company/selectbyname", params).then(res => {
						console.log(res.data);
						if (res.data.data == '此名称已存在') {
							this.companybtnshow = false
							return callback(new Error('此名称已存在'));
						} else {
							this.companybtnshow = true
						}
					})



				}

			};
			return {
				ltype: 'picture-card',
				companyimgshow: true,
				tradeid: '',
				showbtn: true,
				imglist: [],
				companybtnshow: false,
				loadings: false,
				options: [],
				a1: false,
				zz: '',
				istrue: true,
				companyinfo: '',
				imgName: '',
				uploadUrl: '',
				fileListByzhizhao: [],
				fileListByshow: [

				],
				province: '',
				city: '',
				area: '',
				positionList: [],
				subLevelModelList: [],
				companytypeList: [],
				companysizeList: [],
				citylist: [], //地区列表
				fileListBymendian: [],
				showDialog: false,
				headerTitle: '企业录入',
				navList: {
					index: 0, //当前是在哪个tab栏
					data: [{
							title: '使用中'
						},
						{
							title: '已注销'
						},
					]
				},

				rules: {
					logo: [ //登陆账号验证
						{
							required: true,
							message: '请输入门店区域',
							trigger: 'change'
						}
					],
					companyname: [ //登陆密码验证
						{
							required: true,
							validator: checkcompanyname,
							trigger: 'blur'
						}
					],
					area: [ //登陆密码验证
						{
							required: true,
							message: '请选择企业所在地',
							trigger: 'change'
						}
					],
					address: [ //登陆密码验证
						{
							required: true,
							message: '请输入详细地址',
							trigger: 'blur'
						}
					],
					identityname: [ //登陆密码验证
						{
							required: true,
							message: '请输入法人名字',
							trigger: 'blur'
						}
					],

					shopcontactposition: [ //登陆密码验证
						{
							required: true,
							message: '请选择营业执照',
							trigger: 'change'
						}
					],


				},
				tableList: {
					list: [{
							title: '企业姓名',
							prop: 'companyName',
							isClick: false
						},
						{
							title: '所在地区',
							prop: 'telnum',
							isClick: false
						},
						{
							title: '公司性质',
							prop: 'createTime',
							isClick: false
						},
						{
							title: '企业规模',
							prop: 'projectName',
							isClick: false
						},
						{
							title: '注册时间',
							prop: 'costStandard',
							isClick: false
						},
						{
							title: '发布岗位数量	',
							prop: 'costStandard',
							isClick: false
						},
						{
							title: '状态	',
							prop: 'costStandard',
							isClick: false
						},
					],
					noOperation: true, //是否有操作项
					operation: [ //操作项内容
						{
							name: '操作',
							isBtn: false,
							title: 'openFlexDialog'
						}
					],
					data: [
						/* {
							companyName: '上海天都人力资源有限公司',
							telnum: '15202120781',
							createTime: '2020-10-12',
							projectName: '帮助公司设计官方网站',
							costStandard: '5000元',
						} */
					]
				},
				aress: [],

				formcompany: {
					logo: '', //logo
					companyname: '', //企业名称
					area: [], //地址
					address: '', //地址
					identityname: '', //法人姓名
					storeBusinessLicenses: '', //营业执照
					companytype: '', //公司类型
					companysize: '', //公司规模
					tradeid: '', //行业
					operationname: '', //运营联系人
					operationtel: '', //运营联系人电话
					companyphone: '', //企业联系电话
					companyemail: '', //企业邮箱
					companyinfo: '', //企业信息
					companyshow: '', //企业风采
					telnum: '',

				},
				searchData: {
					noFounder: true, //姓名
					noTime: true, //时间段
					phonenum: true, //手机号码
					searchInfo: {}, //搜索信息
				},

				form: {
					userName: '', //用户姓名
					telnum: '', //电话
					startDate: '', //开始时间
					endDate: '', //截至时间
				},
				b: {},
			}
		},

		created() {
			this.getWorkers();
			this.resetposition();
			this.formcompany.area[0] = this.b.province
			this.formcompany.area[1] = this.b.city
			this.formcompany.area[2] = this.b.area
			console.log(this.formcompany.area);
			if (this.$route.query.checkadd) {
				this.checkadd = true
				this.headerTitle = '企业修改'
				this.companybtnshow = true
			}
		},

		mounted() {
			if (this.fileListByshow.length > 8) {
				this.companyimgshow = false
			}
		},
		methods: {
			chanetrade() {
				this.formcompany.tradeid = this.tradeid

			},
			a1s() {
				console.log(11111);
			},

			dellogo() {
				this.formcompany.logo = null
			},

			delyy() {
				this.zz = ''
			},
			getLogo(id, type) {
				if (!id) return;
				let params = {
					accessoryid: id,
					updownmark: "1"
				};
				this.$ceshiAxios2.post("/v1/common/upAndDown", params).then(res => {
					console.log(res);
					if (res.data.message === "success.") {
						if (type == "old") {
							this.zz = res.data.data.filecontent;
						} else {
							this.newLogoUrl = res.data.data.filecontent;
						}
					}
				});
			},

			//101050000, 101050400, 230811
			resetposition() {
				if (this.$route.query.companyname) {
					this.showbtn = false
				}

				let params = {
					companyid: this.$route.query.companyid,
					type: '3',
				}
				this.$ceshiAxios.post('v1/platform/company/reviewDetail', params).then(res => {
					let b = res.data.data;
					this.b = res.data.data;
					if (!b) {
						return
					}
					this.formcompany.logo = b.logo
					this.formcompany.address = b.address
					this.formcompany.companyemail = b.companyemail
					this.formcompany.companysize = b.companysize
					this.formcompany.companyname = b.companyname
					this.formcompany.companytype = b.companytype
					this.formcompany.tradeid = b.industrytype
					this.formcompany.companyinfo = b.introduction
					// this.formcompany.tradeid = b.industrytypename
					// this.formcompany.tradeid = b.industrytype 
					this.formcompany.identityname = b.legalperson
					this.formcompany.operationtel = b.telnum
					this.formcompany.address = b.address
					this.fileListBymendian.push({
						url: b.logo
					})

					for (var i in this.subLevelModelList) {
						if (b.industrytype == this.subLevelModelList[i].code) {
							this.tradeid = this.subLevelModelList[i].name
						}
					}

					if (b.pictureurls != '' && b.pictureurls != undefined) {
						this.fileListBysho = b.pictureurls.split(';')
						if (this.fileListBysho.length > 1) {
							for (var i in this.fileListBysho) {
								this.fileListByshow.push({
									url: this.fileListBysho[i]
								})
							}
							for (var i in this.fileListByshow) {
								this.formcompany.companyshow += this.fileListByshow[i].url + ';'
							}
							this.formcompany.companyshow = this.formcompany.companyshow.substr(0, this.formcompany
								.companyshow.length - 1);
							console.log(this.fileListByshow);
						} else {
							this.fileListByshow.push({
								url: b.pictureurls
							})
						}
					}

					this.formcompany.operationname = b.username
					this.formcompany.companyinfo = b.introduction
					this.formcompany.companyid = b.companyid
					// this.formcompany.=b.
					this.getLogo(b.buslicenseid, 'old')
					console.log(b.buslicenseid);

					// this.formcompany.area[0] = 101020000
					// this.formcompany.area[1] = 101020100
					// this.formcompany.area[2] = 310104
					console.log(this.formcompany.area);
					//101050000, 101050400, 230811 
					for (var i in this.options) {
						// if (b.province == this.options[i].value) {
						// 	console.log(b.province);
						// 	this.formcompany.area[0] = this.options[i].value

						// }
						// for (var k in this.options[i].children) {
						// 	if (b.city == this.options[i].children[k].value) {
						// 		this.formcompany.area[1] = this.options[i].children[k].value
						// 		console.log(b.city);
						// 	}
						// 	for (var z in this.options[i].children[k].children) {
						// 		if (b.area == this.options[i].children[k].children[z].value) {
						// 			this.formcompany.area[2] = this.options[i].children[k].children[z].value
						// 			console.log(b.area);
						// 		}
						// 	}

						// }

					}












				})
			},
			getUpload(base64ImageUrl) {
				// console.log(base64ImageUrl)
				// 可以在这里发送上传图片请求
				let params = {
					accname: this.imgName,
					filecontent: base64ImageUrl,
					updownmark: '0',
				}
				this.$ceshiAxios2.post('v1/common/upAndDown', params).then(res => {
					this.formcompany.storeBusinessLicenses = res.data.data.accessoryid
					this.getLogo(this.formcompany.storeBusinessLicenses, 'old')
				})

			},

			uploadZipAction() {


				this.getBase64Image(this.uploadUrl).then((res) => {
						const base64ImageUrl = res;
						this.getUpload(base64ImageUrl);

					})
					.catch((err) => {
						console.log(err);
					});
			},

			onChange(file) {
				this.imgName = file.name;
				var image = new Image();
				image.src = file.url;
				this.uploadUrl = image;
				console.log(this.uploadUrl);
			},

			addcompany() {
				if (this.formcompany.logo == '') {
					return this.$message.warning('请上传企业logo');
				} else if (this.formcompany.companyname == '') {
					return this.$message.warning('请输入企业名称');
				} else if (this.formcompany.adddress == '') {
					return this.$message.warning('请填写企业的详细地址');
				} else if (this.formcompany.identityname == '') {
					return this.$message.warning('请填写企业企业法人');
					// 
				}
				// else if (this.formcompany.storeBusinessLicenses == '') {
				// 	return this.$message.warning('请上传营业执照');
				// }


				let params = {
					inputuserid: localStorage.getItem('userid'),
					companyid: this.$route.query.companyid,
					province: this.province,
					city: this.city,
					area: this.area,
					companyname: this.formcompany.companyname,
					companytype: this.formcompany.companytype,
					companysize: this.formcompany.companysize,
					industrytype: this.formcompany.tradeid,
					linkman: this.formcompany.operationname,
					linkphone: this.formcompany.operationtel,
					telnum: this.formcompany.operationtel,
					address: this.formcompany.address,
					logo: this.formcompany.logo,
					introduction: this.formcompany.companyinfo,
					companyemail: this.formcompany.companyemail,
					pictureurls: this.formcompany.companyshow,
					legalperson: this.formcompany.identityname,
					buslicenseid: this.formcompany.storeBusinessLicenses,
					inserttype: '0'
				}
				this.$ceshiAxios.post('v1/company/infoUpdateBack', params).then(res => {
					if (res.data.code == 1) {
						this.$message.success('操作成功')
						this.linkTo("/home/pgentering")
					} else {
						this.$message.warning(res.data.message)
					}
				})
			},
			getWorkers() {
				// let workers = require('../../assets/mask/positionList.json');
				let base = require('../../assets/mask/baseGeneral.json');
				let indutry = require('../../assets/mask/select_industry.json');
				// let city = require('../../assets/mask/city.json');

				let city = require('../../assets/mask/city.json');
				this.citylist = city.city
				this.options = city.city; //工作城市
				this.positionList = indutry.tradeList
				for (var i in this.positionList) {
					for (var k in this.positionList[i].subLevelModelList) {
						this.subLevelModelList.push(this.positionList[i].subLevelModelList[k])
					}

				}
				if (this.$route.query.companyid) {

				}
				let params = {
					companyid: this.$route.query.companyid,
					type: '3',
				}




				// for (var i in this.subLevelModelList){
				// 	if( 1103 ==this.subLevelModelList[i].code){
				// 		this.formcompany.tradeid = this.subLevelModelList[i].name
				// 		console.log(11111);
				// 	}
				// }

				this.$ceshiAxios.post('v1/platform/company/reviewDetail', params).then(res => {
					let b = res.data.data
					let arr = [];
					for (var i in this.options) {
						if (!b) {
							return
						}
						if (b.province == this.options[i].value) {
							console.log(b.province);
							arr[0] = this.options[i].value
							this.province = arr[0]

						}
						for (var k in this.options[i].children) {
							if (b.city == this.options[i].children[k].value) {
								arr[1] = this.options[i].children[k].value
								console.log(b.city);
								this.city = arr[1]
							}
							for (var z in this.options[i].children[k].children) {
								if (b.area == this.options[i].children[k].children[z].value) {
									arr[2] = this.options[i].children[k].children[z].value
									console.log(b.area);
									this.area = arr[2]
								}
							}

						}


					}
					console.log(arr);
					this.formcompany.area = [...arr]
					console.log(this.formcompany.area);
				})


				this.companysizeList = base.companyRange
				this.companytypeList = base.companyType
			},
			handleChange(value) {
				this.province = value[0]
				this.city = value[1]
				if(this.area = value[2]==undefined){
					this.area ='';
				}else {
					this.area=value[2]
				}
				console.log(value);
			},
			handleRemoveBymendian(res, file, fileList) {
				console.log(this.fileListByshow);

				this.fileListByshow.some((item, i) => {
					if (item.url == res.url) {
						this.fileListByshow.splice(i, 1)
						return true
					}
				})
				console.log(this.formcompany.companyshow);
				 this.fileListByshow.join(';')
				 this.formcompany.companyshow='';
				for (var i in this.fileListByshow) {
					this.formcompany.companyshow += this.fileListByshow[i].url + ';'
				}
				this.formcompany.companyshow = this.formcompany.companyshow.substr(0, this.formcompany
					.companyshow.length - 1);

				console.log(this.fileListByshow);
				console.log(this.formcompany.companyshow);

			},
			successBymendian(res, file, fileList) {
				// this.$refs.uploadFile.clearFiles();
				console.log(res.data.url, '图片路径');
				this.fileListBymendian.push({
					url: res.data.url,

				});
				console.log('1111111111');
				this.loadings = true
				this.formcompany.logo = res.data.url
				this.loadings = false
				this.storePhotos = res.data.url
				this.imgshows = false

			},

			successByzhizhao(res, file, fileList) {
				// this.$refs.uploadFile.clearFiles();
				console.log(res);
				console.log(res.data.url, '图片路径');
				this.fileListByzhizhao.push({
					url: res.data.url,
				});
				var a = []
				for (var i in this.fileListByzhizhao) {
					a.push(this.fileListByzhizhao[i].url)
				}
				this.formcompany.storeBusinessLicenses = a.join(';')

				this.storePhotos = res.data.url
				this.imgshows = false

			},
			successByshow(res, file, fileList) {
				// this.$refs.uploadFile.clearFiles();
				console.log(res.data.url, '图片路径');
				this.fileListByshow.push({
					url: res.data.url,
				});
				var a = []
				for (var i in this.fileListByshow) {
					a.push(this.fileListByshow[i].url)
				}
				console.log(this.fileListByshow.length, 'changdu');
				if (this.fileListByshow.length > 8) {
					this.companyimgshow = false
					this.ltype = false
				}
				this.formcompany.companyshow = a.join(';')
				this.fileListBymendians.push(res.data.url); //门店照片赋值
				console.log(this.fileListBymendian.slength, '长度');
				console.log(res.data.url, '图片');
				this.storePhotos = res.data.url
				this.imgshows = false

			},
			handlePictureCardPreview() {},
			search() {

			},
			opneAddUser() {
				this.linkTo("/home/enteringaddposition", {
					id: 1,
					positionname: 1
				});
			},
			tabSwitch(index) {

			},
			searchList(form) {
				if (form.userName) {
					form.businessmanName = form.userName;
					delete form.userName;
				}
				console.log(form);
				this.searchData.searchInfo = form;
				this.getDataList(this.searchData.searchInfo);
			},
		},

	}
</script>

<style scoped="scoped">
	/deep/ .el-upload--picture-card {
		background-color: transparent;
		border: none;
		border-radius: 6px;
		box-sizing: border-box;
		width: 148px;
		height: 148px;
		line-height: 146px;
		vertical-align: top;
	}

	.stybox {
		background-color: #fbfdff;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		box-sizing: border-box;
		width: 148px;
		height: 148px;
		line-height: 146px;
		vertical-align: top;
	}

	.search {
		margin: 20px 0;
	}

	.el-form-item {
		min-width: 300px;
		float: left;
		margin-right: 20px;
	}

	.el-form {
		margin-top: 20px;
	}

	.searchBtn {
		width: 140px;
	}

	.searchBox {
		padding: 0 30px;
	}

	.container {
		background-color: #fff;
		height: 100%;
		padding-left: 20px;
	}

	.main-tabs {
		background-color: #EFF1F8;
		margin-bottom: 20px;
		margin-left: -20px;
		padding-left: 50px;
	}

	.main-tabs li {
		height: 40px;
		line-height: 40px;
		float: left;
		margin: 10px 20px;
		padding: 0 30px;
		cursor: pointer;
	}

	.main-tabs .active {
		background: #0064E4;
		border-radius: 20px;
		color: #fff;
	}

	.addUser {
		cursor: pointer;
	}

	.dialogForm {
		margin: 0 auto;
		width: 600px;
		height: 300px;
		padding-left: 58px;

	}

	.remend {
		margin-left: 100px;
		color: red;

	}

	.dialogForm h2 {
		margin: 23px 167px;
		padding-top: 20px;
	}

	.dialogForms {
		width: 600px;
		margin: 0 auto;
		height: 400px;
	}

	.header-title {
		margin-top: 20px;
		padding: 0 0 20px 0;
		border-bottom: 1px solid #D2D2D2;
	}

	.header-title .border {
		width: 15px;
		height: 30px;
		background-color: #0064E4;
		margin-right: 20px;
		float: left;
	}

	.header-title p {
		float: left;
		font-weight: bold;
		line-height: 30px;
	}

	.header-title span {
		display: inline-block;
		float: right;
		font-weight: bold;
		color: #0000FF;
		line-height: 30px;
		margin-right: 20px;
	}

	.header-title .opt span {
		float: left;
		margin-right: 20px;
		padding: 10px 20px;
		border: 1px solid #000;
		border-radius: 20px;
		cursor: pointer;
	}

	.pageBox {
		margin-top: 20px;
	}

	.addbox {
		width: 1350px;
		margin: 0 auto;
		height: 1000px;
		display: flex;
		flex-direction: row;

	}

	.box1 {
		float: left;
		flex: 1;
		width: 400px;
		position: relative;
	}

	.box2 {
		float: left;
		width: 400px;
		margin-left: 40px;
		margin-right: 40px;
	}

	.box3 {
		float: left;
		width: 400px;
	}

	.box4 {
		width: 293px;
		position: absolute;
		bottom: -87px;
		right: -17px;
	}

	.box button {
		width: 50px;
		height: 20px;
	}

	.tudou {
		position: relative;
		margin: 0 auto;
		width: 148px;
		height: 148px;

	}


	.tudou>img {
		width: 100%;
		height: 100%;


	}


	.tudou::before {
		content: '';
		display: none;
		position: absolute;
		top: 0px;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3) center no-repeat;
	}

	.tudou:hover::before {
		display: block;
	}

	.spandel {
		position: absolute;
		color: white;
		top: 50%;
		left: 48%;
		display: none;
	}

	.tudou:hover .spandel {
		display: block;
	}
</style>
